<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>问卷调查系统-查看数据</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/init.css" />
    <link rel="stylesheet" href="css/view.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/common/util.js"></script>
    <script src="js/lib/echarts.min.js" defer></script>
    <script src="js/view/show_charts.js" defer></script>
    <script src="js/view/page_view.js" defer></script>
    <script src="js/view/check_chart.js" defer></script>
    <script>
        headerAnimation();
    </script>
</head>

<body>
    <!--  头部  -->
    <div id="header" class="clear">
        <ul class="nav-list">
            <li class="nav-item"><a href="index.html">我的问卷</a></li>
        </ul>
        <div class="avatar">
            <img src="img/avatar.jpg" alt="">
            <span>用户</span>
        </div>
    </div>

    <!-- 标题 -->
    <div class="title-box">
        <div class="questionnaire-title">
            <h3 id="headline">我的问卷</h3>
            <p class="description">
                此统计分析只包含完整回收的数据
            </p>
        </div>
    </div>

    <!-- 主体 -->
    <div id="main">
        <div class="container clear">
            <div class="check_contain">
                <div class="box_contain">
                    <div class="title">
                        <a href="index.html">
                            <div class="back1 fl">
                                <i class="iconfont icon-back"></i> 返回
                            </div>
                        </a>
                    </div>
                    <div class="analysis">

                    </div>
                    <!-- 分页 -->
                    <div class="pagination clear">
                        <a href="javascript:void(0)" class="up" mask="up"><i
                                class="iconfont icon-arrow-left-bold"></i></a>

                        <a href="javascript:void(0)" class="down" mask="down"><i
                                class="iconfont icon-arrow-right-bold"></i></a>
                    </div>
                    <a href="index.html" class="btn btn-normal btn-back">
                        <i class="iconfont icon-back"></i> 返回
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div id="bg-top-left"></div>
    <div id="bg-top-right"></div>
    <div id="bg-bottom-left"></div>
    <div id="bg-bottom-right"></div>


    <!-- 选项模板 1 (针对于单选题)-->
    <template id="q_que_li">
        <li>
            <span class="opn fl">{title}</span>
            <!--占比条-->
            <span class="bar_line fr">
                <span class="bar">
                    <span class="line" style="width:{mywidth}"></span>
                </span>
                <span class="percentage">
                    {percent}
                </span>
            </span>
        </li>
    </template>

    <!-- 选项模板2 (针对多选题)-->
    <template id="q_que_li2">
        <li>
            <span class="opn fl">{opts}</span>
        </li>
    </template>

    <!--选项模板3 (针对文本题)-->
    <template id="word_per">
        <li>
            <!--占比条-->
            <span class="bar_line fr">
                <span class="bar">
                    <span class="line" style="width:{mywidth}"></span>
                </span>
                <span class="percentage">
                    {percent}
                </span>
            </span>
        </li>
    </template>

    <!-- 单选模板 -->
    <template id="question_radio">
        <div class="q">
            <div class="q_title">
                <div class="q_headline">
                    <div class="q_tt">
                        <span class="q_num">
                            {num}
                        </span>
                        <span class="title2">
                            <i class="iconfont icon-danxuankuangxuanzhong"></i>单选题
                            {headline}
                        </span>
                        <span class="ch_title fr">
                            数据占比
                        </span>
                    </div>

                    <div class="q_que">
                        <ul>
                            {lihtml}
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </template>

    <!-- 多选模板 -->
    <template id="question_checkbox">
        <div class="q">
            <div class="q_title">
                <div class="q_headline">
                    <div class="q_tt">
                        <span class="q_num">
                            {num}
                        </span>
                        <span class="title2">
                            <i class="iconfont icon-xuanzhong"></i>多选题
                            {headline}
                        </span>
                        <span class="ch_title fr">
                            数据占比
                        </span>
                        <div class="ch_chart fr">
                            {t_ch}
                        </div>
                    </div>

                    <div class="q_que">
                        <ul>
                            {table_li}
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </template>

    <!-- 文本模板 -->
    <template id="question_text">
        <div class="q">
            <div class="q_title">
                <div class="q_headline">
                    <div class="q_tt">
                        <span class="q_num">
                            {num}
                        </span>
                        <span class="title2">
                            <i class="iconfont icon-wenbenkuang"></i>简答题
                            {headline}
                        </span>
                        <span class="ch_title2 fr">
                            有效回答占比
                        </span>
                    </div>

                    <div class="q_que">
                        <ul>
                            {lihtml}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </template>
</body>

</html>
